<template>
	<div class="v-header" :style="[vHeaderStyle]">
		<v-statusbar class="status-bar"></v-statusbar>
		<div class="main" :style="[style]">
			<v-statusbar></v-statusbar>
			<div class="title">
				<div class="back" v-if="back" @click="toPage(-1)"></div>
				<slot>{{ title }}</slot>
			</div>
			<div class="right" v-if="hasRight">
				<slot name="right"></slot>
			</div>

			<div class="headaer-background" :style="[backgroundStyle]"></div>
		</div>
	</div>
</template>

<script>
let HeaderHeight = uni.upx2px(50)

export default {
	name: "v-header",
	props: {
		title: {
			type: String,
			default: "",
		},
		back: {
			type: Boolean,
			default: false,
		},
		background: {
			type: String,
			default: "",
		},
		scrollTop: {
			type: Number,
			default: 0,
		},
		transparent: {
			type: String,
			default: "none",
			validator(value) {
				return ["auto", "always", "none"].includes(value)
			},
		},
		color: {
			type: String,
			default: "#000",
		},
		backColor: {
			type: String,
		},
		fixed: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			statusBarHeight: 0,
			titleBarHeight: 0,
		}
	},
	mounted() {
		//获取状态栏的高度
		// #ifndef H5
		let systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		// #endif
	},
	computed: {
		hasRight() {
			return !!this.$slots.right
		},
		vHeaderStyle() {
			const position = this.fixed ? "fixed" : "relative"
			return {
				position,
			}
		},
		style() {
			let paddingTop = 0
			// #ifdef APP-PLUS
			if (plus.navigator.hasNotchInScreen()) {
				paddingTop = 130
			}
			// #endif
			return {
				paddingTop: paddingTop + "px",
				color: this.color,
			}
		},
		backStyle() {
			return {
				color: this.backColor || this.color,
			}
		},
		scrollHeaderProportion() {
			return this.scrollTop / HeaderHeight
		},
		backgroundStyle() {
			let opacity
			if (this.transparent === "auto") {
				opacity = this.scrollHeaderProportion
			} else if (this.transparent === "none") {
				opacity = 1
			} else if (this.transparent === "always") {
				opacity = 0
			}
			return {
				background: this.background,
				opacity,
			}
		},
	},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped>
$height: 90rpx;

.v-header {
	--status-bar-height: 50px;
	position: absolute;
	text-align: center;
	color: #fff;
	padding-bottom: $height;
	z-index: 100004;
	.main {
		line-height: $height;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100004;
		.status-bar {
			position: relative;
			z-index: 2;
		}
		.title {
			position: relative;
			z-index: 2;
		}
		.back {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 20rpx;
			margin: auto;
			width: 25rpx;
			height: 25rpx;
			border-bottom: 2rpx solid currentColor;
			border-left: 2rpx solid currentColor;
			border-top: 2rpx solid transparent;
			border-right: 2rpx solid transparent;
			transform: rotate(45deg);
			z-index: 3;
			&::before {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				transform: scale(3);
			}
		}
		.right {
			position: absolute;
			right: 0;
			z-index: 2;
			top: 0;
		}
		.headaer-background {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 1;
			height: 100%;
		}
	}
}
</style>
